<template>
  <div class="container-box-tree" id="container">
    <div id="left" class="left-box">
      <pub-select-org-tree @select="changeOrg" />
    </div>
    <div id="line" class="resize-line"></div>
    <div id="right" class="right-box">
      <list-page>
        <pub-search
          v-model:searchColumns="searchColumns"
          v-model:search-form="searchForm"
          mask-append-to="table-content"
          @search="search()"
        >
          <template #leftBtn></template>
        </pub-search>
        <pub-table
          ref="pubTable"
          :column="columns"
          :data="tableData"
          :loading="tableLoading"
        >
          <template v-slot:custom="scope">
            {{ formatAddress(scope.row, 1) || '--' }}
          </template>
          <template v-slot:orgType="scope">
            {{ formatJglx(scope.row.orgType) || '--' }}
          </template>
        </pub-table>
        <pub-pagination
          :total="pagination.total"
          v-model:page="pagination.page"
          v-model:limit="pagination.pageSize"
          @pagination="pagination.change"
        ></pub-pagination>
      </list-page>
    </div>
  </div>
</template>

<script setup>
import { formatAddress } from '@/utils/index'
import { useTable } from '@/hooks/UseTable'
import { get_org_page_list } from '@/api/api'
import { get_org_type_list } from '@/api/system'
import { useUserStore } from '@/pinia/modules/user'
const searchColumns = ref([
  {
    label: '工会名称',
    el: 'Input',
    bind: 'orgName',
    defaultValue: '',
    labelWidth: 90
  },
  {
    label: '所属区域',
    el: 'AreaSelect',
    bind: 'areaCode',
    defaultValue: useUserStore().userLastArea,
    startFrom: `${useUserStore().userParentArea || '000000'}`,
    labelWidth: 90
  },
  {
    label: '机构类型',
    el: 'OrgTypeList',
    bind: 'orgType',
    defaultValue: '',
    labelWidth: 90
  },
  {
    label: '单位性质',
    el: 'DictSelect',
    bind: 'unionNature',
    code: 'DWXZ',
    defaultValue: '',
    labelWidth: 90
  }
])
const columns = ref([
  { label: '工会名称', prop: 'orgName' },
  // { label: '机构编码', prop: 'orgCode' },
  { label: '地区', prop: 'creditCode', type: 'custom' },
  { label: '机构类型', prop: 'orgType',slot:'orgType' },
  {
    label: '单位性质',
    prop: 'unionNature',
    type: 'formatDict',
    formatCode: 'DWXZ'
  }
])
const currentId = ref()
let { tableData, search, getList, pagination, searchForm, tableLoading } =
  useTable(get_org_page_list,{searchOrgId:currentId})
// const router = useRouter()

const currentClientX = ref()
const drabContent = () => {
  // 获取 左边区域 的 宽度
  let left = document.getElementById('left') // 获取 移动区域 的 宽度
  let line = document.getElementById('line') // 获取 右边区域 的 宽度
  let right = document.getElementById('right') // 移动区域鼠标移入事件
  line.onmousedown = function (e1) {
    // 移动的距离
    let lineLeft
    if (!currentClientX.value) {
      currentClientX.value = e1.clientX
      lineLeft = e1.clientX
    } else {
      lineLeft = currentClientX.value
    }
    document.onmousemove = function (e2) {
      // 移动的位置 （侧边栏的宽度 + 移动的宽度）
      let diffVal = 180 + (e2.clientX - lineLeft) // 移动区间的范围 [180, 740]
      if (diffVal >= 180 && diffVal <= 740) {
        // 移动区域距离左边的距离
        left.style.width = diffVal + 'px' // 右边改变后的宽度 （改变后的宽度要加上移动区域的宽度）
        right.style.width =
          document.getElementById('container').clientWidth -
          (diffVal + 16) +
          'px'
      }
    }
    document.onmouseup = function () {
      document.onmousemove = null
      document.onmouseup = null
    }
  }
}
const allOrgType = ref([])
const getAllOrgType = async () => {
  let { data } = await get_org_type_list()
  allOrgType.value = data
  console.log(allOrgType.value);
}
const changeOrg = val => {
  console.log(val)
  currentId.value = val
  search()
}
const formatJglx = orgType => {
  let item = allOrgType.value.find(item => item.code == orgType)
  return item ? item.name : ''
}
// const detail = row => {
//   router.push({ name: 'EJCD-detail', query: { id: 123456 } })
// }

onMounted(() => {
  getAllOrgType()
  getList()
  drabContent()
})
</script>
<style lang="scss" scoped>
.container-box-tree {
  display: flex;
  height: 100%;
  .left-box {
    user-select:none;
    padding: 10px;
    width: 180px;
    // flex: 0 0 180px;
    height: 100%;
    overflow: auto;
    // border-right: 10px solid #eee;
  }
  .resize-line {
    /*鼠标移入显示左右箭头*/
    // position: relative;
    cursor: ew-resize;
    width: 16px;
    height: 100%;
    min-width: 16px;
    max-width: 16px;
    background-color: #eee;
    // background-color: transparent;
    &::after {
      content: '';
      display: block;
      width: 100%;
      height: 100%;
      background: url(../../../../assets/img/common/drab.png);
      background-size: 100% 16px;
      background-repeat: no-repeat;
      background-position: 50% 50%;
    }
  }
  .right-box {
    width: calc(100% - 180px);
    max-width: calc(100% - 196px);
    user-select: none;
  }
}
</style>
